<template>
	<div v-if="value" class="loading" :data-clickable="clickable">
		<div class="wrap">
			<i class="iconfont spin">&#xe6d1;</i>
			<slot></slot>
		</div>
	</div>
</template>

<script>
	export default{
		props:{
			'clickable':{type:Boolean},
			'value':{type:Boolean}
		}
	}
</script>

<style lang="scss" scoped>
	.loading{
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
		&[data-clickable="true"]{
			pointer-events: none;
		}
		.wrap{
			background: #fff;
			box-shadow: 0 2px 20px rgba(0,0,0,0.06);
			padding: 40px;
			border-radius: 10px;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			align-content: center;
			align-items: center;
		}
	}
</style>
